import React from "react";
import Search from "antd/lib/input/Search";
import { Table, Tag, Button, Modal, Spin } from "antd";
import { search, downloadFromCT, commonDownload } from "../stores/Download";
import cx from "./DownloadWidget.less";
import Player from "griffith";
import { Mp4 } from "../models/Mp4";
// import { ipcRenderer } from "electron";

export class DownloadWidget extends React.Component<
  any,
  { list: Mp4[]; loading: boolean }
> {
  handleSearch = async (name: string) => {
    try {
      this.setState({ loading: true });
      const { totalNum, list } = await search(name);
      this.setState({ list: list });
    } finally {
      this.setState({ loading: false });
    }
  };

  handlePreview = (title: string, id: string) => {
    const sources = {
      hd: {
        play_url: `http://www.chedvd.com/video/${id}`
      }
    };
    Modal.success({
      title,
      width: 750,
      // @ts-ignore
      content: <Player id={title} sources={sources} />
    });
  };

  handleDownloadFromCT = async (record: any) => {
    const { onlinePlay, id, name } = record;
    try {
      this.setState({ loading: true });
      if (onlinePlay) {
        await commonDownload(
          `http://www.chedvd.com/video/${id}`,
          `${name}.mp4`
        );
      } else {
        await downloadFromCT(
          `http://www.chedvd.com/song/${id}.html`,
          `${name}.mp4`
        );
      }
    } finally {
      this.setState({ loading: false });
    }
  };

  constructor(props: any) {
    super(props);
    this.state = {
      list: [],
      loading: false
    };
  }

  columns = [
    {
      title: "歌曲编号",
      dataIndex: "id",
      key: "id"
    },
    {
      title: "歌曲名称",
      dataIndex: "name",
      key: "name"
    },
    {
      title: "歌手",
      dataIndex: "player",
      key: "player"
    },
    {
      title: "预览",
      key: "action",
      render: (text: any, record: any) => {
        if (record.onlinePlay) {
          return (
            <Tag
              color="#87d068"
              onClick={() => this.handlePreview(record.name, record.id)}
            >
              点击预览
            </Tag>
          );
        } else {
          return <Tag color="volcano">暂不支持预览</Tag>;
        }
      }
    },
    {
      title: "下载",
      key: "url",
      render: (text: any, record: any) => {
        return (
          <Button
            type="primary"
            onClick={async () => await this.handleDownloadFromCT(record)}
          >
            点击下载
          </Button>
        );
      }
    }
  ];

  render() {
    return (
      <Spin tip="运行中。。。" spinning={this.state.loading}>
        <div className={cx("download-pg")}>
          <h1>MP4车载视频 下载</h1>

          <div className={cx("search-bar")}>
            <Search
              placeholder="歌曲名称"
              enterButton="搜索"
              size="large"
              onSearch={this.handleSearch}
            />
          </div>

          <div className={cx("search-result")}>
            <Table
              columns={this.columns}
              dataSource={this.state.list}
              rowKey="uid"
            />
          </div>
        </div>
      </Spin>
    );
  }
} // class PageParams end
